import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入登录组件
import Login from '@/views/Login'
import Layout from '@/views/Layout'
// 二级路由组件导入
// import Home from '@/views/Layout/components/Home'
/* import Question from '@/views/Layout/components/Question'
import Video from '@/views/Layout/components/Video'
import User from '@/views/Layout/components/User'
import Search from '@/views/Search'
import SearchResult from '@/views/SearchResult'
import Article from '@/views/Article'
import UserProfile from '@/views/UserProfile'
import UserChat from '@/views/UserChat' */
// ctrl + 左右箭头 切换单词   行首是 fn + 左箭头  行尾 fn + 右箭头
const Home = () => import('@/views/Layout/components/Home')
const Question = () => import('@/views/Layout/components/Question')
const Video = () => import('@/views/Layout/components/Video')
const User = () => import('@/views/Layout/components/User')
const Search = () => import('@/views/Search')
const SearchResult = () => import('@/views/SearchResult')
const Article = () => import('@/views/Article')
const UserProfile = () => import('@/views/UserProfile')
const UserChat = () => import('@/views/UserChat')
// 导入仓库
import store from '@/store'
Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/login', component: Login },
    { path: '/',
      component: Layout,
      // 子路由规则
      children: [
        // meta 路由元信息 (标识位)
        { path: '/', component: Home, meta: { isKeepAlive: true }},
        { path: '/question', component: Question },
        { path: '/video', component: Video },
        { path: '/user', component: User }
      ]
    },
    { path: '/search', component: Search },
    { path: '/searchResult', component: SearchResult },
    // 动态路由匹配
    { path: '/article/:id', component: Article, name: 'article' },
    { path: '/userProfile', component: UserProfile },
    { path: '/userChat', component: UserChat }
  ]
})
// 前置导航守卫
// to 去哪里
// from 从哪来
// next  放行函数
// to  和 from是路由信息对象
// 一个页面不仅仅只有一个权限页面,有可能有好多页面是有权限的
const AuthUrls = ['/user', '/userVip', '/UserCount']
router.beforeEach((to, from, next) => {
  const token = store.state.user.tokenInfo.token
  // 如果用户访问的是登录页并且是存在token的情况, 不让用户看到登录页
  // if (to.path === '/login' && token) {
  //   next('/')
  // }
  // console.log(to)
  // 如果访问的路由是/user, 先判断是否登录(token) 有token 放行
  // console.log(to.path)
  // if (to.path === '/user') {
  // AuthUrls.indexOf(to.path) !== -1 -- 检测数组元素是否存在某个元素,存在返回对应的索引,不存在返回 -1
  if (AuthUrls.includes(to.path)) { // 检测数组元素是否存在某个元素,存在就返回true, 反之返回false
    // console.log('检测是否有token')
    console.log(to)
    // 检测用户是否有token(本地存储或者vuex中取token)

    // 如果有token直接放行,没有token引导用户到登录页面
    if (token) {
      next()
    } else {
      // 如果要做原路返回 携带之前要去的路由地址的参数
      // next('/login?bakto=' + to.path)
      // next写法和  this.$router.push() 传递参数 是一样的
      next({
        path: '/login',
        query: {
          backto: to.fullPath // 携带之前要去的路由地址的参数
          // 路由信息对象中的path是路由的地址 fullPath是既有路由地址也有路由的参数
        }
      })
    }
  } else {
    // 访问的是别的页面直接放行
    // console.log('直接放行')
    next()
  }
})
// 获取原型对象上的push函数
const originalPush = VueRouter.prototype.push
// 修改原型对象中的push方法
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
export default router
